<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script src="./axios.min.js"></script>
    <script>
      const btn = document.getElementById('btn')
      btn.onclick = async function () {
        // 利用axios发送请求
        // const result = await axios({
        //   url: 'http://localhost:5000/b',
        //   //   如果是get请求,要上传查询字符串参数.配置的属性叫params
        //   //   params: {
        //   //     name: 'zs',
        //   //     age: 18,
        //   //   },
        //   // 如果是post请求,要上传才能全数,配置的属性叫data
        //   method: 'post',
        //   data: {
        //     xxx: 123,
        //     yyy: 567,
        //   },
        // })
        // const result = await axios.get('http://localhost:5000/a/888', {
        //   params: {
        //     name: 'zs',
        //   },
        // })
        // const result = await axios.post('http://localhost:5000/b', {
        //   xxx: 111,
        //   yyy: 222,
        // })
        // console.log(result) //注意: axios发送请求,promise成功的值是一个对象. 这个对象.data才是响应主体的数据

        // 通过参加axios实例，来发送ajax请求
        const axiosInstance = axios.create({
          // 如果使用axios实例发送请求,并且发请求时使用了相对路径.则相对路径会先和baseURL进行拼接,然后再和当前html页面的url进行拼接
          baseURL: '/xxx',
          // 使用axios实例发出去的所有请求,请求头中一定都有xxx:1
          // headers: {
          //   xxx: 1,
          // },
          timeout: 2000, //请求的超时时间
        })

        // 配置请求拦截器
        // 请求拦截器开发就干两个事: 1. 展示loading效果 2. 把token添加到请求头中
        axiosInstance.interceptors.request.use(function (config) {
          // console.log(config)
          // console.log('展示正在加载的效果....')
          config.headers.zzz = 999
          return config
        })

        axiosInstance.interceptors.response.use(
          // 第一个是响应成功了,触发
          // 响应拦截器的成功的回调一般干两件事: 1. 隐藏loading效果 2. 去壳(只要response.data)
          function (response) {
            // response就是一个对象,对象里面config,data等信息
            // console.log(response)
            // 这个成功的回调中返回什么,则发送请求promise成功的value值就是什么
            return response.data
          },
          // 第二个是响应失败了,触发
          // 这个失败的回调中要干两件事: 1. 隐藏loading效果 2. 提示用户请求失败
          function (error) {
            // console.log('这次请求响应失败了', error)
            // 失败的错误信息
            alert('请求失败了')
            // 注意: 这个失败的回调中必须return一个失败的promise,否则当请求失败的时候,await
            // 后面的代码会执行
            return Promise.reject(error)
          }
        )

        // url: http://localhost:5000/xxx/a

        // try {
        // const result = await axiosInstance.get('/b/777', {
        //   params: { name: 'ls' },
        // })
        // } catch (error) {
        //   alert('请求失败了')
        // }

        // // url: http://localhot:5000/xxx/b
        // try {
        const result1 = await axiosInstance.post('/a', { zzz: 123, yyy: 789 })
        console.log('1111', result1)
        // } catch (error) {
        //   alert('请求失败了')
        // }

        // console.log(result1)
      }
    </script>
  </body>
</html>
